<template>
  <div class="pay-for-knowledge">
    <Header></Header>
    <div class="banner-wrap">
      <div class="banner main-container">
        <img src="~@/assets/img/img_4_7.png" alt />
        <div class="content">
          <h1>全国合作伙伴正在招募中</h1>
          <p>与魔法云一起开启亿万市场</p>
          <button @click="$router.push({name:'login'})">了解更多</button>
        </div>
      </div>
    </div>
    <div class="section-list">
      <div class="section section1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">魔法云代理商六大优势</div>
          </div>
          <div class="section-body">
            <ul>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_2.png" alt />
                <div class="text-wrap">
                  <h1>全案的营销支持</h1>
                  <p>全案的营销支持，让您有能力一周就迅速入场</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_5.png" alt />
                <div class="text-wrap">
                  <h1>50+的行业模板</h1>
                  <p>多套行业模板免费使用</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_6.png" alt />
                <div class="text-wrap">
                  <h1>总部培训支持</h1>
                  <p>便捷的操作，总部培训的支持，让您的事业更轻松</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_4.png" alt />
                <div class="text-wrap">
                  <h1>专业售后服务</h1>
                  <p>分销拼团持续裂变销售</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_3.png" alt />
                <div class="text-wrap">
                  <h1>产品持续迭代</h1>
                  <p>每周更新，持续迭代</p>
                </div>
              </li>
              <li class="scrollRevealTop0">
                <img src="~@/assets/img/img_4_1.png" alt />
                <div class="text-wrap">
                  <h1>超低的拿货成本</h1>
                  <p>超低的拿货成本，让您在竞争者处于不败之地</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="section style4">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">三大政策 快速盈利</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <ul>
              <li>
                <img src="~@/assets/img/img_4_8.png" alt />
                <div>销售模式输出</div>
              </li>
              <li>
                <img src="~@/assets/img/img_4_10.png" alt />
                <div>模块化销售</div>
              </li>
              <li>
                <img src="~@/assets/img/img_4_9.png" alt />
                <div>持续性培训</div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="section style4">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">三大政策 快速盈利</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <ul>
              <li>
                <img src="~@/assets/img/img_4_11.png" alt />
                <div>提交申请</div>
              </li>
              <li>
                <img src="~@/assets/img/img_4_13.png" alt />
                <div>线下审核</div>
              </li>
              <li>
                <img src="~@/assets/img/img_4_12.png" alt />
                <div>洽谈方案</div>
              </li>
              <li>
                <img src="~@/assets/img/img_4_14.png" alt />
                <div>签约合作</div>
              </li>
            </ul>
            <button @click="$router.push({name:'login'})">了解更多</button>
          </div>
        </div>
      </div>


      <tryOut></tryOut>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";
import tryOut from "@/components/tryOut";
import common from "@/assets/js/common";
import config from "@/assets/js/config";

//import $ from "jquery";

export default {
  mixins: [common],
  name: "pay-for-knowledge",
  components: {
    Header,
    Footer,
    FixedBtn,
    tryOut
  },
  data() {
    var _this = this;
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.section1 {
  .section-inner {
    .section-body {
      padding-bottom: 12px;

      ul {
        li {
          box-shadow: 0px 4px 6px 0px rgba(237, 237, 237, 0.35),
            4px 0px 6px 0px rgba(237, 237, 237, 0.41);
          border-radius: 6px;
          margin: 0 16px 16px;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;

          img {
            width: 26px;
            flex-shrink: 0;
            margin-right: 20px;
          }

          .text-wrap {
            flex: 1;

            h1 {
              color: #000000;
              font-weight: 500;
              font-size: 16px;
              margin-bottom: 8px;
              line-height: 25px;
            }

            p {
              color: #5b5b5b;
              line-height: 25px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
